<template>
  <div>
    <el-card style="margin: 20px 0" shadow="hover">
      <el-button
        type="primary"
        icon="ele-Plus"
        @click="$emit('change-view', ViewNames.SPU_FORM)"
        :disabled="!category3Id"
        >添加SPU</el-button
      >
      <el-table stripe border style="margin: 20px 0" :data="SPUList">
        <el-table-column
          label="序号"
          type="index"
          width="100"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button
              type="warning"
              icon="ele-Edit"
              title="修改spu"
              @click="changeView(ViewNames.SPU_FORM, row)"
            ></el-button>
            <el-button
              type="success"
              icon="ele-Plus"
              title="添加spu"
              @click="changeView(ViewNames.SKU_FORM, row)"
            ></el-button>
            <el-button
              type="info"
              icon="ele-InfoFilled"
              title="查看spu列表"
              @click="showSkuListDialogHandler(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="ele-Delete"
              title="删除spu"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        layout="prev,pager,next,jumper,->,sizes,total"
        @current-change="paginationChange(`current`, $event)"
        @size-change="paginationChange(`size`, $event)"
      >
      </el-pagination>
    </el-card>
    <!-- sku列表对话框 -->
    <el-dialog
      v-model="isShowSkuListDialog"
      :title="showSpuInfo?.spuName + ' 的SKU列表'"
      @close="closeShowSkuListDialogHandler"
    >
    <el-table :data="skus" v-loading="isSkuLoading">
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column labe="重量" prop="weight"></el-table-column>
      <el-table-column  label="默认图片">
        <template #="{ row }">
            <img width="100" :src="row.skuDefaultImg" />
          </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
export default defineComponent({
  name: "SPUList",
});
</script>
<script lang="ts" setup>
import myPagination from "@/hooks/pagination";
import useCategorySelector from "@/hooks/categorySelector";
import { reqGetSPUInfoList } from "@/api/spu";
import type { typeGetSPUInfoDetailList } from "@/api/spu";
import { ElMessage } from "element-plus";
import { ViewNames } from "../index";
import type { ResSPU } from "@/api/spu";
import {reqFindBySpuId,} from "@/api/sku" 
import type {typeReqFindBySpuIdParm} from "@/api/sku"
//数据2,3,4 
const {
  total,
  page,
  pageSize,
  paginationCurrentChangeListener,
  paginationSizeChangeListener,
} = myPagination(getSPUListInfo, getSPUListInfo);
//数据1:解构分类列表里的数据
const { category3Id } = useCategorySelector();
//数据5:SPU列表
const SPUList = ref<typeGetSPUInfoDetailList[]>([]);
//数据6: 当前需要显示SKU列表的spu信息
const showSpuInfo = ref<ResSPU | null>(null);
// 显示SPU下的SKU列表对话框的状态
const isShowSkuListDialog = computed(() => !!showSpuInfo.value);
// 存储获取到SKU列表
const skus = ref<typeReqFindBySpuIdParm>([]);
// sku的数据请求状态
const isSkuLoading = ref(false);


//请求1: 获取SPU列表
async function getSPUListInfo() {
  try {
    //当category3Id存在时,发送请求
    if (category3Id.value != "") {
      const result = await reqGetSPUInfoList(
        page.value,
        pageSize.value,
        Number(category3Id.value)
      );
      console.log("请求1", result);
      SPUList.value = result.records; //保存spu列表
      total.value = result.total; //保存总条数
      page.value = result.current; //保存当前页
      pageSize.value = result.size; //保存每页条数
    }
  } catch (e) {
    ElMessage.error("获取SPU列表失败");
  }
}
getSPUListInfo();
const emits = defineEmits(["changeView"]);
//点击添加spu按钮
function changeView(viewName: ViewNames, data?: ResSPU) {
  emits("changeView", viewName, data);
}
//监听1:监听category3id的变化
watch(category3Id, getSPUListInfo, {
  immediate: true,
});
//事件1: pagination当前页改变事件   参数1是传入的字符串 参数2是当前页改变的值
const paginationChange = (type: string, v: number) => {
  console.log("type", type, "v", v);
  if (type === "current") {
    // page.value = v
    paginationCurrentChangeListener(v);
  } else if (type === "size") {
    // pageSize.value = v
    paginationSizeChangeListener(v);
  }
  // getSPUListInfo()
};
/**
 * 显示sku列表数据的对话框
 */
async function showSkuListDialogHandler(row: ResSPU) {
  showSpuInfo.value = row;
  //请求spuid下的所有sku列表
  try{
     // 设置请求状态loading为true
     isSkuLoading.value = true;
    skus.value =  await reqFindBySpuId(row.id)
  }catch(e){
    ElMessage.error("请求spuid下的所有sku列表失败")
  } finally {
    // 无论请求成功还是失败，只要请求完成，改变loading状态
    isSkuLoading.value = false;
  }
}

/**
 * 关闭sku列表数据的对话框
 */
function closeShowSkuListDialogHandler() {
  showSpuInfo.value = null;
}
</script>

<style lang="less" scoped></style>
